<template>
	<view class="container">
		<view class="wrap">
			<view class="header">
				<text class="title">健康咨询</text>

				<!-- <button class="menu-button" >
				<image src="/static/images/menu-icon.png" />
			</button> -->
				<view class="action-item search-input " @click="openMenu">
					<!-- <view class="iconfont icon-menu u-list"></view> -->
					<u-icon name="list" color="#000" size="40"></u-icon>
					<!-- <text class="text">菜单</text> -->
				</view>

			</view>
			<view class="search-bar">
				<input type="text" placeholder="你要了解什么" />
				<view class="action-item" >
				<!-- 	<view class="iconfont icon-version  search" @click="search"></view> -->
					<!-- <text class="text">菜单</text> -->
					<u-icon name="search" color="#666" size="24" @click="search"></u-icon>
				</view>
			</view>
			<view class="status-buttons">
				<button :class="{ active: currentStatus === 'all' }" @click="filterQuestions('all')">所有</button>
				<button :class="{ active: currentStatus === 'unanswered' }"
					@click="filterQuestions('unanswered')">未回答</button>
				<button :class="{ active: currentStatus === 'answered' }"
					@click="filterQuestions('answered')">已回答</button>
				<button :class="{ active: currentStatus === 'resolved' }"
					@click="filterQuestions('resolved')">已解决</button>
				<button :class="{ active: currentStatus === 'closed' }" @click="filterQuestions('closed')">已关闭</button>
			</view>
			<view class="question-list">
				<view class="question-item" v-for="question in filteredQuestions" :key="question.id">
					<view class="status-and-user">
						<view :class="['status', 'status-' + question.status]">{{ question.statusText }}</view>
						<view class="user-info">
							<image class="avatar" :src="question.avatar" />
							<text class="user-name">{{ question.userName }}</text>
							<text class="ask-time">{{ question.askTime }}</text>
						</view>
					</view>
					<view class="title">{{ question.title }}</view>
					<view class="tags">
						<view class="tag" v-for="tag in question.tags" :key="tag">#{{ tag }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="tabbar">
				<view class="action-item" @click="backHome">
					<!-- <view class="iconfont icon-home nav "></view> -->
						<u-icon name="home-fill" color="#666" size="22"  ></u-icon>
					  <text class="text">首页</text>  
				</view>
				<view class="action-item floating-button " @click="openConsultationModal">
					<text class="text">+</text>
				</view>
				<view class="action-item  " @click="backMine">
					<!-- <view class="iconfont icon-mine nav  "></view> -->
					<!-- <u-icon name="pause-circle" color="#666" size="22"  ></u-icon> -->
					<u-icon name="account-fill" color="#666" size="24"  ></u-icon>
					  <text class="text">我的</text>  
				</view>
				
			<!-- 	
				<button @click="navigateTo('home')">首页</button>
				<button @click="navigateTo('profile')">个人中心</button> -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStatus: 'all',
				questions: [{
						id: 1,
						status: 'unanswered',
						statusText: '未回答',
						avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
						userName: '夜雨声烦',
						askTime: '提问三小时以前',
						title: '如何保持身体健康？',
						tags: ['健康', '身体']
					},
					{
						id: 2,
						status: 'answered',
						statusText: '已回答',
						avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
						userName: '微光逐风',
						askTime: '提问一天以前',
						title: '每天锻炼多长时间最合适？',
						tags: ['锻炼', '时间']
					},
					{
						id: 3,
						status: 'resolved',
						statusText: '已解决',
						avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
						userName: '星辰大海',
						askTime: '提问两天以前',
						title: '怎样健康饮食？',
						tags: ['饮食', '健康']
					},
					{
						id: 4,
						status: 'closed',
						statusText: '已关闭',
						avatar: 'https://randomuser.me/api/portraits/women/4.jpg',
						userName: '风华绝代',
						askTime: '提问一周以前',
						title: '如何预防感冒？',
						tags: ['感冒', '预防']
					},
					{
						id: 5,
						status: 'answered',
						statusText: '已回答',
						avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
						userName: '梦里花落知多少',
						askTime: '提问五天以前',
						title: '保持心理健康的方法有哪些？',
						tags: ['心理', '健康']
					},
					{
						id: 6,
						status: 'unanswered',
						statusText: '未回答',
						avatar: 'https://randomuser.me/api/portraits/women/6.jpg',
						userName: '墨染青衣',
						askTime: '提问两个小时以前',
						title: '每天喝多少水合适？',
						tags: ['饮水', '健康']
					},
					{
						id: 7,
						status: 'resolved',
						statusText: '已解决',
						avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
						userName: '晨曦微露',
						askTime: '提问三天以前',
						title: '如何增强免疫力？',
						tags: ['免疫力', '增强']
					},
					{
						id: 8,
						status: 'answered',
						statusText: '已回答',
						avatar: 'https://randomuser.me/api/portraits/women/8.jpg',
						userName: '雪中红',
						askTime: '提问四天以前',
						title: '如何改善睡眠质量？',
						tags: ['睡眠', '质量']
					},
					{
						id: 9,
						status: 'unanswered',
						statusText: '未回答',
						avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
						userName: '山水有情',
						askTime: '提问一小时以前',
						title: '保持健康的饮食习惯有哪些？',
						tags: ['饮食', '习惯']
					},
					{
						id: 10,
						status: 'closed',
						statusText: '已关闭',
						avatar: 'https://randomuser.me/api/portraits/women/10.jpg',
						userName: '花前月下',
						askTime: '提问一周以前',
						title: '如何缓解工作压力？',
						tags: ['工作', '压力']
					}
				]
			};
		},
		computed: {
			filteredQuestions() {
				if (this.currentStatus === 'all') {
					return this.questions;
				}
				return this.questions.filter(question => question.status === this.currentStatus);
			}
		},
		methods: {
			filterQuestions(status) {
				this.currentStatus = status;
			},
			openMenu() {
				// Handle menu button click
				this.$modal.msg("菜单设计中")
			},
			openConsultationModal() {
				// Handle floating button click to open consultation modal
				//this.$modal.msg("发布咨询设计中")
				//this.$tab.switchTab('/pages/ask/ask');
				this.$tab. navigateTo('/pages/ask/ask');
			},
			navigateTo(page) {
				// Handle navigation
			},
			backHome(){
				this.$tab.switchTab('/pages/index');
			},
			backMine(){
				this.$tab.switchTab('/pages/mine/index');
			},
			search(){
				this.$modal.msg("搜索开发中")
			}
		}
	};
</script>


<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
		/* 使用视口高度 */

	}
	
	 
	.wrap {
		padding: 0 10px 0 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #fff;
		color: #fff;
		height: 100px;

	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.header {
		background-color: #fff;

		.title {
			color: #000;
			font-size: 40rpx;
			text-align: center;
			width: 100%;
		}
	}

	.menu-button {
		background: transparent;
		border: none;
		cursor: pointer;
	}

	.menu-button image {
		width: 24px;
		height: 24px;
	}

	.menu {
		font-size: 34px;
		color: #000;
		font-weight: bold;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20px;
	}

	.search-bar input {
		flex: 1;
		border: none;
		background-color: #f3f3f3;
		padding: 20px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.search-bar .action-item {
		background-color: #f3f3f3;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8px 20px;
		height: 100%;
	}

	.search-bar button {
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.search-bar button image {
		width: 24px;
		height: 24px;
	}

	.search {
		color: #676767;
		font-size: 24px;
	}

	.no-border::after {
		border: none;
	}

	.status-buttons {
		display: flex;
		justify-content: space-around;
		padding: 00px 0;
		background-color: #fff;
		border-top: 0px solid #ccc;
		/* 添加顶部边框 */
		border-bottom: 0px solid #ccc;
		/* 添加底部边框 */
		position: sticky;
		top: 0;
		z-index: 1;
		border: none;
		margin: 0 00 10px 0;
	}

	.status-buttons button::after {
		border: none;
	}

	.status-buttons button {
		background-color: #fff;
		border: 1px solid #fff;
		/* 添加按钮边框 */
		border-radius: 0px;
		/* 圆角边框 */
		padding: 0px 0px;
		padding: 5px 10px 5px 10px;
		font-size: 16px;
		cursor: pointer;
		/* width: 80px; */
		height: 30px;
		line-height: 20px;
		text-align: center;
	}

	.status-buttons button.active {
		background-color: #ddd;
		color: #444;
		border-radius: 15px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.question-list {
		flex: 1;
		/* 使问题列表填充剩余空间 */
		padding: 10px;
		overflow-y: auto;
		background: #fff;
		/* 确保可以滑动 */
		padding-bottom: 20px;
	}

	.question-item {
		padding-bottom: 20px;
		border-bottom: 1px solid #dadada;
		cursor: pointer;
		margin-top: 20px;
	}

	.status-and-user {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 14px;
		/* color: #010101; */
		color:#666666;
		display: inline-block;
		margin-right: 10px;
	}

	.status-answered {
		background-color: #c2f7c2;
	}

	.status-unanswered {
		background-color: #febdc1;
	}

	.status-resolved {
		background-color: #c2e4f7;
	}

	.status-closed {
		background-color: #ccc;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 16px;
		color: #333;
		/* color: #666; */
		margin-right: 10px;
	}

	.ask-time {
		font-size: 14px;
		color: #666;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000;
		margin-top: 10px;
	}

	.tags {
		display: flex;
		margin-top: 10px;
	}

	.tag {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}


.footer {
	background-color: #eee;
	padding: 10px;
	position: fixed;
	/* 固定在底部 */
	bottom: 0;
	width: 100%;
	/* 充满整个宽度 */
	display: flex;
	justify-content: center;
}

.tabbar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	/* 使 tabbar 充满宽度 */
	max-width: 600px;
	/* 可选: 设置最大宽度 */
}

.tabbar .action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
	color: #333;
	cursor: pointer;
}

.tabbar .icon-home, .tabbar .icon-mine {
	font-size: 24px;
	color: #333;
}

.floating-button {
	width: 60px;
	height: 60px;
	background-color: #6db87b;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 36px;
	cursor: pointer;
	margin-top: -30px; /* 调整按钮位置使其位于tabbar上方 */
}
.floating-button .text{ color: #fff; font-size: 28px;}

</style>